<template>
  <div>
    <el-tree :data="data"
             :props="defaultProps"
             node-key="menuid"
             default-expand-all
             ref="tree"
             :show-checkbox="isShowCheckbox"
             @node-drag-start="handleDragStart"
             @node-drag-enter="handleDragEnter"
             @node-drag-leave="handleDragLeave"
             @node-drag-over="handleDragOver"
             @node-drag-end="handleDragEnd"
             @node-drop="handleDrop"
             draggable
             :check-on-click-node="false"
             :allow-drop="allowDrop"
             :allow-drag="allowDrag"
             @node-click="click"
             @check-change="handleCheckChange"
             @check="handleCheck">
    </el-tree>
    <div class="buttons">
      <!--  
      <el-button @click="setCheckedNodes">通过 node 设置</el-button> -->
      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
      <!-- <el-button @click="resetChecked">清空</el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  props: ['isalert', 'isShowCheckbox', 'myrole'],
  data() {
    return {
      data: [],
      treeMyRole: [],

      defaultProps: {
        id: 'menuid',
        children: 'menus',
        label: 'menuname',
      },
    }
  },
  created() {
    this.findMenu()
  },
  watch: {
    isalert(newValue, oldValue) {
      this.findMenu()
    },

    myrole(newValue, oldValue) {
      this.treeMyRole = newValue
      this.$refs.tree.setCheckedKeys(this.treeMyRole)
    },
  },
  methods: {
    //设置当前被选中的菜单
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([2, 3])
    },

    findMenu() {
      this.$axios
        .get('/api/menus/findAll')
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            this.data = res.data.data
            console.log(this.data)
          }
        })
        .catch()
    },
    handleCheck(node, choise) {
      //所有被选中的数组
      console.log(node)
      var arr = choise.checkedNodes
      this.$emit('choiseMethod', arr)
      console.log('我勾选的菜单的id', arr)
    },
    handleCheckChange(data, checked, indeterminate) {
      //console.log(data, checked, indeterminate)
    },

    handleDragStart(node, ev) {
      console.log('drag start', node)
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log('tree drag enter: ', dropNode.label)
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log('tree drag leave: ', dropNode.label)
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log('tree drag over: ', dropNode.label)
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      //draggingNode去到的父结点
      // dropNode 移动的节点
      //dropNode.data.menuid
      console.log(draggingNode, dropNode)
      this.$axios
        .get(
          '/api/menus/updateOne/' +
            draggingNode.data.menuid +
            '/' +
            dropNode.data.menuid
        )
        .then((res) => {
          if (res.data.code == 200) {
          }
        })
        .catch()

      // console.log('tree drag end: ', dropNode && dropNode.label, dropType)
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', dropNode.label, dropType)
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === '二级 3-1') {
        return type !== 'inner'
      } else {
        return true
      }
    },
    allowDrag(draggingNode) {
      console.log(draggingNode)
      return draggingNode.data.menuname.indexOf('三级 3-2-2') === -1
    },
    click(data) {
      console.log(data)
      this.$emit('callfather', data)
    },
  },
}
</script>